<template>
  <div class="markdown">
    <h1>无缝滚动</h1>
    <a-row :gutter="20">
      <a-col :span="12">
        <MdPreview :val="demo1" :show="false" desName="无缝滚动一">
          <template slot="code">
            <Seamless1 />
          </template>
          <template slot="des">
            <p><span>说明：</span>1、需要安装vue-seamless-scroll插件，执行</p>
            <pre v-highlight><code>npm install vue-seamless-scroll --save</code></pre>
            <p>2、main.js全局引入</p>
            <pre v-highlight><code>import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(vueSeamlessScroll)</code></pre>
            <p>3、官方文档 <a href="https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default" target="_blank">https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default</a></p>
          </template>
        </MdPreview>
      </a-col>
      <a-col :span="12">
        <MdPreview :val="demo2" :show="false" desName="无缝滚动二">
          <template slot="code">
            <Seamless2 />
          </template>
        </MdPreview>
      </a-col>
    </a-row>
    <h2>API</h2>
    <table>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      <tr>
        <td>step</td>
        <td>数值越大速度滚动越快</td>
        <td>Number</td>
        <td>1</td>
      </tr>
      <tr>
        <td>limitMoveNum</td>
        <td>开启无缝滚动的数据量</td>
        <td>Number</td>
        <td>5</td>
      </tr>
      <tr>
        <td>hoverStop</td>
        <td>是否启用鼠标hover控制</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>direction</td>
        <td>方向 0 往下 1 往上 2向左 3向右</td>
        <td>Number</td>
        <td>1</td>
      </tr>
      <tr>
        <td>openTouch</td>
        <td>移动端开启touch滑动</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>singleHeight</td>
        <td>单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1</td>
        <td>Number</td>
        <td>0</td>
      </tr>
      <tr>
        <td>singleWidth</td>
        <td>单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3</td>
        <td>Number</td>
        <td>0</td>
      </tr>
      <tr>
        <td>waitTime</td>
        <td>单步停止等待时间(默认值1000ms)</td>
        <td>Number</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>switchOffset</td>
        <td>左右切换按钮距离左右边界的边距(px)</td>
        <td>Number</td>
        <td>30</td>
      </tr>
      <tr>
        <td>autoPlay</td>
        <td>1.1.17版本前手动切换时候需要置为false</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>switchSingleStep</td>
        <td>手动单步切换step值(px)</td>
        <td>Number</td>
        <td>134</td>
      </tr>
      <tr>
        <td>switchDelay</td>
        <td>单步切换的动画时间(ms)</td>
        <td>Number</td>
        <td>400</td>
      </tr>
      <tr>
        <td>switchDisabledClass</td>
        <td>不可以点击状态的switch按钮父元素的类名</td>
        <td>String</td>
        <td>disabled</td>
      </tr>
      <tr>
        <td>isSingleRemUnit</td>
        <td>singleHeight and singleWidth是否开启rem度量</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>navigation</td>
        <td>左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
    </table>
    <h2>事件</h2>
    <table>
      <tr>
        <th>事件名</th>
        <th>说明</th>
      </tr>
      <tr>
        <td>ScrollEnd</td>
        <td>一次滚动完成的回调事件</td>
      </tr>
    </table>
  </div>
</template>

<script>
import Seamless1 from "@/views/comps/components/seamless1.vue";
import Seamless2 from "@/views/comps/components/seamless2.vue";
export default {
    components: {
      Seamless1,
      Seamless2,
    },
    data() {
      return {
        demo1: `
<template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
      <ul class="list_a wenzi" v-for="(item,index) in listData">
        <li>
          <i>{{index + 1}}</i>
          <div>
            <div class="item_c">
              <p>{{item.title}}</p>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
</template>

<script>
export default {
  data () {
    return {
      listData: [{
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市人民政府关于印发“八大产业”《三年行动计划》',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开',
        'date': '2017-12-16'
      }]
    }
  },
  computed: {
    optionHover () {
      return {
        hoverStop: true,
      }
    }
  }
}
<\/script>

<style lang="less" scoped>
.seamless-warp {
  height: 155px;
  overflow: hidden;
}

.list_a li {
  position: relative;
  margin-bottom: 10px;
}

.list_a li>i {
  margin-top: 5px;
  width: 23px;
  height: 20px;
  display: block;
  float: left;
  color: #00d5ff;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  line-height: 20px;
  background: url(~@/assets/images/seamless/num_bg.png) no-repeat center;
}

.list_a.wenzi li>i {
  margin-top: 0px;
}

.list_a li>div {
  margin-left: 30px;
}

.list_a .item_c p{
  margin: 0;
}
</style>
        `,
        demo2: `
<template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
      <ul class="list_a wenzi" v-for="(item,index) in listData">
        <li>
          <i>{{index + 1}}</i>
          <div>
            <div class="item_c">
              <p>{{item.title}}</p>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
</template>

<script>
export default {
  data () {
    return {
      listData: [{
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市人民政府关于印发“八大产业”《三年行动计划》',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开',
        'date': '2017-12-16'
      }]
    }
  },
  computed: {
    optionHover () {
      return {
        singleHeight: 31,
        waitTime: 2500
      }
    }
  }
}
<\/script>

<style lang="less" scoped>
.seamless-warp {
  height: 155px;
  overflow: hidden;
}

.list_a li {
  position: relative;
  margin-bottom: 10px;
}

.list_a li>i {
  margin-top: 5px;
  width: 23px;
  height: 20px;
  display: block;
  float: left;
  color: #00d5ff;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  line-height: 20px;
  background: url(~@/assets/images/seamless/num_bg.png) no-repeat center;
}

.list_a.wenzi li>i {
  margin-top: 0px;
}

.list_a li>div {
  margin-left: 30px;
}

.list_a .item_c p{
  margin: 0;
}
</style>
        `
      }
    }
}
</script>

<style lang="less" scoped>

</style>